<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>板块管理 - 后台管理中心</title>
  <link rel="stylesheet" href="/admin/css/pintuer.css" />
  <link rel="stylesheet" href="/admin/css/admin.css" />
  <link href="/admin/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
  <script src="/admin/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="/admin/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="panel admin-panel">
  <div class="panel-head">
    <strong><span class="icon-th-large"></span> 板块管理</strong>
    <button type="button" class="btn btn-primary btn-sm" style="float:right;" data-bs-toggle="modal" data-bs-target="#plateModal">
      添加板块
    </button>
  </div>

  <!-- 板块列表表格 -->
  <table class="table table-striped table-hover">
    <thead>
    <tr>
      <th>ID</th>
      <th>板块名称</th>
      <th>描述</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody id="plateTable">
    <!-- 板块数据将通过JS动态加载 -->
    </tbody>
  </table>
</div>

<!-- 板块添加/编辑模态框 -->
<div class="modal fade" id="plateModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalTitle">添加板块</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="plateForm">
          <input type="hidden" id="plateId" value="">
          <div class="mb-3">
            <label for="plateName" class="form-label">板块名称</label>
            <input type="text" class="form-control" id="plateName" required>
          </div>
          <div class="mb-3">
            <label for="plateDesc" class="form-label">描述</label>
            <textarea class="form-control" id="plateDesc" rows="3"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="savePlate">保存</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  // 模拟板块数据
  let plates = [
    { id: 1, name: "热门电影", desc: "展示当前热门的电影作品" },
    { id: 2, name: "经典回顾", desc: "回顾影史经典影片" },
    { id: 3, name: "新片预告", desc: "最新电影预告和资讯" }
  ];
  let currentId = 4; // 用于生成新ID

  // 初始化页面
  $(function() {
    renderPlates();
    bindEvents();
  });

  // 渲染板块列表
  function renderPlates() {
    const $table = $("#plateTable");
    $table.empty();

    plates.forEach(plate => {
      const tr = $(`
                <tr>
                    <td>${plate.id}</td>
                    <td>${plate.name}</td>
                    <td>${plate.desc || '-'}</td>
                    <td>
                        <button class="btn btn-sm btn-warning edit-btn" data-id="${plate.id}">编辑</button>
                        <button class="btn btn-sm btn-danger delete-btn" data-id="${plate.id}">删除</button>
                    </td>
                </tr>
            `);
      $table.append(tr);
    });
  }

  // 绑定事件
  function bindEvents() {
    // 保存板块
    $("#savePlate").click(function() {
      const id = $("#plateId").val();
      const name = $("#plateName").val().trim();
      const desc = $("#plateDesc").val().trim();

      if (!name) {
        alert("请输入板块名称");
        return;
      }

      if (id) {
        // 编辑操作
        const index = plates.findIndex(p => p.id == id);
        if (index !== -1) {
          plates[index].name = name;
          plates[index].desc = desc;
        }
      } else {
        // 添加操作
        plates.push({
          id: currentId++,
          name: name,
          desc: desc
        });
      }

      // 重置表单并关闭模态框
      $("#plateForm")[0].reset();
      $("#plateId").val("");
      $("#plateModal").modal("hide");

      // 重新渲染列表
      renderPlates();
    });

    // 编辑按钮事件
    $(document).on("click", ".edit-btn", function() {
      const id = $(this).data("id");
      const plate = plates.find(p => p.id == id);

      if (plate) {
        $("#plateId").val(plate.id);
        $("#plateName").val(plate.name);
        $("#plateDesc").val(plate.desc || "");
        $("#modalTitle").text("编辑板块");
        $("#plateModal").modal("show");
      }
    });

    // 删除按钮事件
    $(document).on("click", ".delete-btn", function() {
      const id = $(this).data("id");
      if (confirm("确定要删除该板块吗？")) {
        plates = plates.filter(p => p.id != id);
        renderPlates();
      }
    });

    // 打开新增模态框时重置表单
    $("#plateModal").on("show.bs.modal", function(e) {
      if (!$(e.relatedTarget).hasClass("edit-btn")) {
        $("#plateForm")[0].reset();
        $("#plateId").val("");
        $("#modalTitle").text("添加板块");
      }
    });
  }
</script>
</body>
</html>
